var width=960,

height=500;

var dx=data[0].length,

dy=data.length;

linear_scale을 통해 색상을 표현하기 위한 scale 정의

var color=d3.scale.linear()

.domain([95, 115, 135, 155, 175, 195])

.range(["#0a0", "#6c0", "#ee0", "#eb4", "#eb9", "#fff"]);

canvas 객체

SVG 객체는 화면에 출력할 모든 정보를 객체 자체에 담고 있으며, 사용자의 상호작용을 처리하는

event handler를 연결할 수 있다.

사용자의 행위에 따라 필요한 객체만 화면에 다시 그려할 상황에 유리

Canvas 객체는 한 번 화면에 그린 것을 저장하지 않는다.

화면을 변경해야 하는 상황이 오는 경우, 그 영역을 다시 그려야 함

d3.select("body").append("canvas")

.attr("width", dx)

.attr("height", dy)

.style("width", width+"px")

.style("height", height+"px")

.call(drawImage);

function drawImage(canvas){

var context=canvas.node().getContext("2d"),

image=context.createImageData(dx, dy);

for(var y=0, p=-1; y<dy; ++y){

for(var x=0; x<dx; ++x){

var c=d3.rgb(color(data[y][x]));

image.data[++p]=c.r;

image.data[++p]=c.g;

image.data[++p]=c.b;

image.data[++p]=255;

}

context.putImageData(image, 0, 0);

}

axis

var x=d3.scale.linear()

.domain([0, dx])

.range([0, width]);

var y=d3.scale.linear()

.domain([0, dy])

.range([height, 0])

var xAxis=d3.svg.axis()

.scale(x)

.orient("top")

.ticks(20);

var yAxis=d3.svg.axis()

.scale(y)

.orient("right");

var svg=d3.select("body").append("svg")

.attr("width", width)

.attr("height", height);

svg.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0, "+height+")")

.call(xAxis)

.call(removeZero);

svg.append("g")

.attr("class", "y axis")

.call(yAxis)

.call(removeZero);

function removeZero(axis){

axis.selectAll("g").filter(function(d){ return !d; }).remove();

}

Heat Map